<template>
  <main id="main" class="site-main karma-blog-page" role="main">
    <div class="container">
      <div class="row">
        <div class="karma-blog-content col-sm-9">
          <article class="blog-grid margin-b-30 athena-blog-post reveal">
            <div class="blog-grid-content">
              <h3 class="blog-grid-title-lg">登录</h3>

              <div class="login-content">
                <div class="row">
                  <div class="col-md-6 col-xs-12">
                    <form class="margin-bottom-0" id="loginForm">
                      <div class="form-group m-b-15">
                        <input name="email" v-model="email" type="text" class="form-control" placeholder="账号"/>
                      </div>
                      <div class="form-group m-b-15">
                        <input type="password" v-model="password" name="password" class="form-control"
                               placeholder="密码"/>
                      </div>
                      <div class="form-group m-b-15">
                        <input type="text" name="code" v-model="code" class="form-control" placeholder="验证码"/>
                      </div>
                      <div class="form-group m-b-15 text-center">
                        <input type="hidden" v-model="code_id" name="verify" class="form-control" placeholder="验证码">
                        <img id="verifyImg" class="" :src="img" @click="getCaptcha" alt="">
                      </div>
                      <div class="login-buttons">
                        <a id="doLogin" @click.prevent="login" class="btn btn-info btn-block btn-lg">登录</a>
                      </div>
                      <div class="form-group m-b-15 text-center" style="margin-top: 5px">
                        <span class="">未有账号?<a href="#register">去注册</a></span>
                      </div>
                      <div class="form-group m-b-15">
                        <p id="showTip" v-html="msg" class="input-lg text-center text-danger"></p>
                      </div>
                      <hr/>
                    </form>
                  </div>
                  <div class="col-md-6 col-xs-12 text-center">
                    <img src="https://yanghaha.vip/front/img/zhifubao.png">
                  </div>
                </div>
              </div>

            </div>
          </article>
        </div>
      </div>

    </div>

  </main>

</template>

<script>
import Index from "@/views/Index";
import BaseService from "@/services/BaseService";

const BaseServiceApi = new BaseService();
export default {
  name: "Login",
  components: {Index},
  data: function () {
    return {
      img: "",
      code_id: "",
      code: "",
      email: "",
      password: "",
      msg: ""
    };
  },
  mounted: function () {
    this.getCaptcha();
  },
  methods: {
    getCaptcha: function () {
      BaseServiceApi.getApi("/api/v1/captcha").then(res => {
        if (res.data.code === 200) {
          this.img = res.data.img;
          this.code_id = res.data.id;
        }
      });
    },
    login: function () {
      let data = {
        email: this.email,
        password: this.password,
        code: this.code,
        code_id: this.code_id
      }
      BaseServiceApi.postApi("/api/v1/login", data).then(res => {
        if (res.data.code === 200) {
          BaseServiceApi.setStorage("token", res.data.data.token);
          window.location.href = "/";
        } else {
          this.msg = res.data.msg;
          this.code = "";
          this.getCaptcha();
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
